﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Encuestas.aspx.cs" Inherits="RosarioFinanzas.Encuestas" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ROSARIO FINANZAS - ENCUESTAS</title>

    <link rel="stylesheet" type="text/css" href="CSS/Encuestas.css?version=3" />

    <script type="text/javascript" src="scripts/jquery/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="scripts/Grafico.js"></script>
    <script type="text/javascript" src="scripts/RGraph/RGraph.common.core.js"  ></script> 
    <script type="text/javascript" src="scripts/RGraph/RGraph.hbar.js" ></script> 

    <script type="text/javascript">

        $(document).ready(function () {
            $("#Votar").click(function () { js_Votar(); });

            js_CargarEncuesta();
                 
        });

        function js_CargarEncuesta()
        {
                                                     
            PageMethods.Enviar(fnOK, fnLlamadaError);
                 
        }

        function fnLlamadaError() {
            alert("No se pudo enviar la información, intentelo nuevamente.");
        }

        function fnOK (msg)
        {
            var tot =  'Votos: ' + (msg.Total + 1);

            $("#Titulo").html(msg.Titulo);
            $("#Opcion1").html(msg.Opcion1);
            $("#Opcion2").html(msg.Opcion2);
            $("#Opcion3").html(msg.Opcion3);
            $("#cantVotantes").html(tot);
                       
        }

        function js_Datos()
        {
                var Datos = ($('#Opcion1vot').is(':checked')).toString() + "|";
                Datos += ($('#Opcion2vot').is(':checked')).toString() + "|";
                Datos += ($('#Opcion3vot').is(':checked')).toString() + "|";
                return Datos;
        }

        function js_Votar()
        {

            PageMethods.Votar(js_Datos(), js_MostrarResultados(), fnLlamadaError);
            
        }
        
        function js_graficar(msg)
        {

            // Acá van los tres valor con los votos
            var data = [msg.Porcentaje1, msg.Porcentaje2, msg.Porcentaje3];

            // en 'labels' van las opciones

            // Create the HBar object giving it the canvas ID and the data just defined.
            var hbar = new RGraph.HBar({
                id: 'canvas',
                data: data,
                options: {
                    background: {
                        barcolor1: 'white',
                        barcolor2: 'white',
                        grid: false
                    },
                    shadow: {
                        self: true,
                        color: '#bbb'
                    },
                    left: {
                        autosize: true
                    },
                    units: {
                        post: '%'
                    },
                    text: {
                        size: 8
                    },
                  //  colors: ['Gradient(white:blue)'],
                    colors: {
                        sequential: true
                    },
                    labels: [msg.Opcion1, msg.Opcion2, msg.Opcion3]
                }
            }).draw()


            //var Datos1 = {
            //    "X": msg.Opcion1,
            //    "Y": msg.Porcentaje1
            //};
            //var Datos2 = {
            //    "X": msg.Opcion2,
            //    "Y": msg.Porcentaje2
            //};
            //var Datos3 = {
            //    "X": msg.Opcion3,
            //    "Y": msg.Porcentaje3
            //};


            //var valores = [];
            //valores.push(Datos1);
            //valores.push(Datos2);
            //valores.push(Datos3);
            $("#Titulo1").html(msg.Titulo);
            //GenerarGraficos(valores, 100, 200);

            $("#Grafico").css({ display: "block" });
            $("#Encuesta").css({ display: "none" });
                        
        }

        function js_MostrarResultados()
        {
            PageMethods.Enviar(js_graficar, fnLlamadaError);
           
        }
         </script>
</head>
<body>
    <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
        </asp:ScriptManager> 
    <div class="divContenedor" id="Encuesta">
        <div class="Titulo" ><span id="Titulo"></span> </div>
        
        <div class="Opcion"><input type="radio" id="Opcion1vot" name="Votar"/><span id="Opcion1" ></span></div>
        
        <div class="Opcion"><input type="radio" id="Opcion2vot" name="Votar"/><span id="Opcion2"></span></div>
        
        <div class="Opcion"> <input type="radio" id="Opcion3vot" name="Votar"/><span id="Opcion3"></span></div>
        
        <div class="Boton"><input type="button" onclick="js_Votar();"  value="Votar" /></div>
    </div>

    <div class="divContenedor" id="Grafico" style="display:none;">
        <div class="Titulo" ><span id="Titulo1"></span> </div>
        <canvas id="canvas"  width="220" height="120"></canvas>
       <div class="divVotantes">
            <span id="cantVotantes"></span>
       </div>
    </div>
    </form>
</body>
</html>
